<template>
	<view class="container">
		<!-- <view class="content">
			<view class="">
				<uni-forms ref="customForm" :rules="data.rules" :modelValue="data.form" label-position="top">
					<uni-forms-item label="姓名" required name="name">
						<uni-easyinput v-model="data.form.name" :disabled="data.status==0" placeholder="请输入姓名" />
					</uni-forms-item>
					<uni-forms-item label="身份证号" required name="card">
						<uni-easyinput v-model="data.form.card" :disabled="data.status==0" placeholder="请输入身份证号" />
					</uni-forms-item>
				</uni-forms>
			</view>
		</view>
		<view class="btn" :class="{btns:data.status==0}" @click="data.status!=0?submit():''">
			实名认证
		</view> -->

		<view class="flex-input">
			<view class="">
				真实姓名
			</view>
			<input type="text" v-model="data.form.name" placeholder="请输入姓名" :disabled="data.status==0"/>
		</view>
		<view class="flex-input">
			<view class="">
				身份证号
			</view>
			<input type="text" v-model="data.form.card" placeholder="请输入身份证号" :disabled="data.status==0"/>
		</view>

		<view class="but" @click="data.status!=0?submit():''">
			提交
		</view>


	</view>
</template>

<script setup>
	import {ref,reactive,getCurrentInstance} from "vue";
	import {onLoad,onShow,onPullDownRefresh,onReachBottom,onReady} from "@dcloudio/uni-app";
	const {proxy} = getCurrentInstance();
	const data = reactive({
		status:1,
		form:{
			name:'',
			card:''
		},
		// 校验规则
		rules: {
			name: {
				rules: [{
					required: true,
					errorMessage: '姓名不能为空'
				}]
			},
			card: {
				rules: [{
					required: true,
					errorMessage: '身份证号不能为空'
				}]
			}
		},
	})
	let customForm=ref()
	onLoad((option)=>{
		getrealName()
	})


	onShow(()=>{
	})
	onPullDownRefresh(()=> {
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		})
	onReachBottom(()=>{
		console.log('onReachBottom')
	})
function submit() {
	proxy.$request({
		url: `api/realName/`,
		method: 'POST',
		data:data.form,
		success(res) {
			console.log(res)
			uni.showToast({
				icon:'none',
				title:res.errmsg
			})
			if(res.errno==0){
					setTimeout(()=>{
						uni.switchTab({
							url:'/pages/personal/index'
						})
					},2000)
			}
		}
	})
}

	function getrealName (){
		proxy.$request({
			url: `api/realName/`,
			method: 'get',
			success(res) {
				data.status=res.errno
				if(res.errno==0){
					data.form.name=res.data.name
					data.form.card=res.data.card

				}
			}
		})
	}
</script>

<style lang="scss" scoped>
	.container{
		padding: 30upx;
		.content{
			padding: 30upx;
			background-color: #fff;
			border-radius: 30upx;
		}
		.btn{
			background-color: $color4;
			color: #fff;
			text-align: center;
			padding: 20upx 0;
			font-size: 16px;
			margin-top: 30upx;
			font-weight: bold;
			border-radius: 40upx;
		}
		.btns{
			background-color: #ccc;
			color: #fff;
		}
		.flex-input{
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #DDDDDD;
			height: 96rpx;
			font-size: 28rpx;
			color: #2D2D2D;
			input{
				text-align: right;
			}
		}
		.but{
			height: 80rpx;
			background: #F63B29;
			border-radius: 16rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 80rpx;
			position: absolute;
			left: 30rpx;
			right: 30rpx;
			bottom: 60rpx;
		}
	}
</style>
